<template>
  <v-container fluid tag="section">
    <v-row justify="center">
      <v-col cols="12" sm="6" lg="3">
        <base-material-stats-card
          color="primary"
          icon="mdi-twitter"
          title="服务器"
          :value="state.world"
          sub-icon="mdi-clock"
          sub-text="Just Updated"
        />
      </v-col>

      <v-col cols="12" sm="6" lg="3">
        <base-material-stats-card
          color="info"
          icon="mdi-poll"
          title="端口"
          :value="state.port+''"
          sub-icon="mdi-tag"
          sub-text="Tracked from Google Analytics"
        />
      </v-col>

      <v-col cols="12" sm="6" lg="3">
        <base-material-stats-card
          color="success"
          icon="mdi-clock"
          title="运行时间"
          :value="state.uptime"
          sub-icon="mdi-calendar"
          sub-text="Last 24 Hours"
        />
      </v-col>

      <v-col cols="12" sm="6" lg="3">
        <base-material-stats-card
          color="orange"
          icon="mdi-sofa"
          title="在线玩家"
          :value="state.playercount+'/'+state.maxplayers"
          sub-icon="mdi-alert"
          sub-icon-color="red"
          sub-text="Get More Space..."
        />
      </v-col>

      <v-col cols="12" sm="6">
        <base-material-card color="warning" class="px-5 py-3">
          <template v-slot:heading>
            <div class="display-2 font-weight-light">玩家背包</div>
            <div class="subtitle-1 font-weight-light">从玩家列表选择玩家</div>
          </template>
          <v-card-text>
            <div
              class="subtitle-1 font-weight-light"
              v-for="(item , index) in serverRules"
              :key="index"
            >
              <strong>{{index+1}}:{{item}}</strong>
            </div>
          </v-card-text>
        </base-material-card>
      </v-col>

      <v-col cols="12" sm="6">
        <base-material-card icon="mdi-clipboard-text" title="在线玩家" class="px-5 py-3">
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="搜索"
            single-line
            hide-details
          ></v-text-field>
          <v-data-table :headers="headers" :items="players" :items-per-page="10" :search="search">
            <template v-slot:item.username="{ item }">
              <v-chip v-if="item.username==''" color="error" dark>未登录</v-chip>
              <v-chip v-else color="primary" dark>{{item.username}}</v-chip>
            </template>
            <template v-slot:item.team="{ item }">{{teams[item.team]}}</template>
            <!-- <template class="text-center" v-slot:item.actions="{ item }">
              <v-tooltip top>
                <template v-slot:activator="{ on }">
                  <v-btn
                    color="primary"
                    class="ml-2"
                    x-small
                    fab
                    dark
                    v-on="on"
                    @click="console11(item)"
                  >
                    <v-icon>mdi-eye</v-icon>
                  </v-btn>
                </template>
                <span>查看</span>
              </v-tooltip>
              <v-tooltip top>
                <template v-slot:activator="{ on }">
                  <v-btn
                    color="warning"
                    class="ml-2"
                    x-small
                    fab
                    dark
                    v-on="on"
                    @click="console11(item)"
                  >
                    <v-icon>mdi-volume-high</v-icon>
                  </v-btn>
                </template>
                <span>解除静音</span>
              </v-tooltip>
              <v-tooltip top>
                <template v-slot:activator="{ on }">
                  <v-btn
                    color="warning"
                    class="ml-2"
                    x-small
                    fab
                    dark
                    v-on="on"
                    @click="console11(item)"
                  >
                    <v-icon>mdi-volume-off</v-icon>
                  </v-btn>
                </template>
                <span>静音</span>
              </v-tooltip>
              <v-tooltip top>
                <template v-slot:activator="{ on }">
                  <v-btn class="ml-2" x-small fab dark v-on="on" @click="console11(item)">
                    <v-icon>mdi-knife</v-icon>
                  </v-btn>
                </template>
                <span>杀死玩家</span>
              </v-tooltip>
              <v-tooltip top>
                <template v-slot:activator="{ on }">
                  <v-btn class="ml-2" x-small fab dark v-on="on" @click="console11(item)">
                    <v-icon>mdi-account-off</v-icon>
                  </v-btn>
                </template>
                <span>ban</span>
              </v-tooltip>
              <v-tooltip top>
                <template v-slot:activator="{ on }">
                  <v-btn
                    color="error"
                    class="ml-2"
                    x-small
                    fab
                    dark
                    v-on="on"
                    @click="console11(item)"
                  >
                    <v-icon>mdi-close</v-icon>
                  </v-btn>
                </template>
                <span>kick</span>
              </v-tooltip>
            </template>-->
          </v-data-table>
        </base-material-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      state: {
        world: "null",
        port: 0,
        uptime: "0",
        playercount: 0,
        maxplayers: 0,
      },
      serverRules: [],
      msg: "123456",
      v_cmd: "cmd text",
      serverMsg: [],

      teams: ["无", "红队", "绿队", "蓝队", "黄队", "紫队"],
      players: [],
      search: "",

      headers: [
        {
          text: "昵称",
          align: "start",
          sortable: false,
          value: "nickname",
        },
        { text: "用户名", value: "username" },
        { text: "组", value: "group" },
        { text: "active", value: "active" },
        { text: "state", value: "state" },
        { text: "队伍", value: "team" },
        // { text: "操作", value: "actions", sortable: false, align: "end" }
      ],
      desserts: [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: "1%",
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: "1%",
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: "7%",
        },
      ],
    };
  },
  mounted() {
    let ttime = new Date("0.00:30:37");
    // console.log(ttime.getTime());

    this.request
      .get("/v2/server/status?token=" + this.$store.state.token)
      .then((res) => {
        this.state = res;
      })
      .catch((error) => {
        // this.loading = false;
      });

    this.request
      .get("/v2/players/list?token=" + this.$store.state.token)
      .then((res) => {
        this.players = res.players;
        // console.log("list=" + res);
      })
      .catch((error) => {
        // this.loading = false;
      });
  },
  methods: {
    submit() {
      console.log(this.$refs.form.validate());
      console.log(this.FormData);
    },
    postBroadcast() {
      console.log(this.msg);

      this.request
        .get(
          "/v2/server/broadcast?token=" +
            this.$store.state.token +
            "&msg=" +
            this.msg
        )
        .then((res) => {
          this.msg = "";
        })
        .catch((error) => {
          // this.loading = false;
        });
    },
    postCmd() {
      this.request
        .get(
          "/v3/server/rawcmd?token=" +
            this.$store.state.token +
            "&cmd=" +
            this.v_cmd
        )
        .then((res) => {
          // this.v_cmd = "";
          this.v_cmd = "";
          res.response.forEach((value) => {
            this.serverMsg.push(value);
          });
        })
        .catch((error) => {
          // this.loading = false;
        });
    },
    console11(item) {
      console.log(item);
    },
  },
};
</script>

<style>
</style>